<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <style>
            * {
                padding: 0px;
                padding: 0px;
            }
    
            body {
                background: linear-gradient(45deg, rgb(160, 191, 124), rgb(255, 255, 255)) fixed;
            }
            #logoimg{
                width: 300px;
                height: 300px;
                margin: -69px; 
            }  
            #logoimg p{
                position: relative;
                top:-76px;
                left:81px;
                color:rgb(64, 116, 52);
            }         
            #myregister {
                width: 300px;
                height: 300px;
                border: 1px solid rgb(160, 191, 124);
                border-radius: 10px;
                /* margin:100px 700px; */
                position: absolute;
                top:150px;
                left: 60%;
                background-color: white;
                color: rgb(64, 116, 52)
            }
    
            #myregister p {
                font-size: 20px;
                font-weight: bolder;
                margin-top: 30px;
                margin-left: 100px;
            }
    
            form {
                margin-left: 30px;
                margin-top: 50px;
            }
    
            label {
                height: 50px;
                line-height: 50px;
            }
    
            #btnLogin {
                margin: 20px 60px 0;
                border: none;
                outline: none;
                width: 40%;
                height: 30px;
                border-radius: 15px;
                background: linear-gradient(rgb(160, 191, 124), rgb(101, 147, 74));
                box-shadow: 0 0 3px rgb(64, 116, 52);
                cursor: pointer;
                color: white;
    
            }
            #myregister a{
                font-size:12px;
                text-decoration: none;
                color:rgb(64, 116, 52);
                position: relative;
                top:10px;
                left:200px;
            }
        </style>
    <script>
        var users = null;
        window.onload = function () {
            if (localStorage.getItem('users')) {
                users = JSON.parse(localStorage.getItem("users"))
            }
            else {
                users = [];
            }
        }
        function register() {
            var userName = document.querySelector('#txtName').value;
            var userPassword = document.querySelector('#txtPassword').value;
            for (var i = 0; i < users.length; i++) {
                if (users[i].name == userName) {
                    alert("用户已经存在");
                    return
                }
            }
            users.push({ "name": userName, "password": userPassword });
            localStorage.setItem('users', JSON.stringify(users))
            alert("注册成功!")
            location.href = "login.html"
        }
    </script>
</head>

<body>
    <div>
        <div id="logoimg">
            <img src="images/logo.png" alt="">
            <p>一年四季，一日三餐</p>
        </div>
            <div id="myregister">
                    <p>用户注册</p>
                    <form action="#">
                        <label for=""> 手机号：</label>
                        <input type="text" name="" id="txtName" placeholder="请输入用户名" required><br>
                        <label for=""> 密&nbsp;&nbsp;&nbsp;码：</label>
                        <input type="password" name="" id="txtPassword" placeholder="请输入密码" required><br>
                        <input type="button" name="" id="btnLogin" value="注册" onclick="register()">
                    </form>
                    <a href="login.html">登录</a>
                    <a href="shouye.html">返回首页</a>
                </div>
    </div>
</body>

</html>